<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer circle player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="dist/jplayer/jquery.jplayer.min.js"></script>

<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

	$("#jpId").jPlayer( {
	  ready: function() { // The $.jPlayer.event.ready event
	    $(this).jPlayer("setMedia", { // Set the media
	      m4a: "m4a/English.m4a"
	    }).jPlayer("stop"); // Attempt to auto play the media
	  },
	  ended: function() { // The $.jPlayer.event.ended event
	    $(this).jPlayer("play"); // Repeat the media
	  },
	  supplied: "m4a"
	});

	$("#jumpToTime").click( function() {
	  $("#jpId").jPlayer("play", parseInt($("#time").val())); // Begins playing 42 seconds into the media.
	});
});
//]]>
</script>
</head>
<body>

	<center style="margin-top:200px;"><lable style="width:250px;height:50px;font-size:50px;line-height:50px;" >time:</lable><input id="time" style="width:370px;height:50px;font-size:50px;line-height:50px;"></input></center>
	<br>
	<center><div id="jumpToTime" style="width:500px;height:250px;background:black;color:white;font-size:50px;line-height:250px;">PLAY</div></center>
	<div id="jpId"></div>
</body>

</html>
